<template>
  <cu-layout :navProp="{ placeholder: true, textColor: 'black' }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-cu-camera-container`]" :style="{ height: `calc(100vh - ${$Platform.navbar}px)` }">
      <template v-if="!camera_image">
        <camera device-position="back" flash="off" @error="error" class="camera-container">
          <cover-view class="mongolian-layer">
            <cover-image class="left-top" :src="$CDN('/common/static/images/left-top-frame.png')"></cover-image>
            <cover-image class="right-top" :src="$CDN('/common/static/images/right-top-frame.png')"></cover-image>
            <cover-image class="left-bottom" :src="$CDN('/common/static/images/left-bottom-frame.png')"></cover-image>
            <cover-image class="right-bottom" :src="$CDN('/common/static/images/right-bottom-frame.png')"></cover-image>
          </cover-view>
        </camera>
      </template>
      <template v-else>
        <cover-view class="camera-container">
          <cover-view class="mongolian-layer">
            <cover-image class="camera_image" :src="camera_image"></cover-image>
          </cover-view>
        </cover-view>
      </template>
      <view class="cu-bar">
        <view v-if="!camera_image" class="btn close" @click="handleBack">返回</view>
        <view v-else class="btn close" @click="handleReset">重拍</view>
        <view class="btn photograph" @click="takePhoto"> </view>
        <view v-if="!camera_image" class="btn album" @click="album">相册</view>
        <view v-else class="btn album" @click="submit">使用</view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { uploadImg } from '@/api/common'
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'camera',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      camera_image: '',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['cameraUrl']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapMutations('app', ['SET_CAMERA_URL']),
    takePhoto() {
      const ctx = uni.createCameraContext()
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          console.log('res.tempImagePath', res.tempImagePath)
          this.camera_image = res.tempImagePath
        },
      })
    },
    handleBack() {
      uni.navigateBack()
    },
    handleReset() {
      this.camera_image = ''
    },
    album() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: async (res) => {
          const { tempFiles } = res
          const file = tempFiles[0]
          const params = {
            filePath: file.path,
            name: 'upfile',
            formData: {
              filename: file.name,
            },
          }
          const { data } = await uploadImg(params)
          this.SET_CAMERA_URL(data?.signedUrl)
          uni.navigateBack()
        },
      })
    },
    async submit() {
      console.log('submit')
      const params = {
        filePath: this.camera_image,
        name: 'upfile',
        formData: {
          filename: 'test.png',
        },
      }
      console.log('params', params)
      const { data } = await uploadImg(params)
      this.SET_CAMERA_URL(data?.signedUrl)
      this.camera_image = ''
      uni.navigateBack()
      // this.camera_image = ''
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('cu-camera-container')} {
  position: relative;
  background: #f5f5f5;
  .camera-container {
    width: 100%;
    height: calc(100% - 100px);
    position: relative;
  }
  .mongolian-layer {
    width: 216px;
    height: 343px;
    transform: scale(1.2);
    box-sizing: border-box;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    cover-image {
      width: 20px;
      height: 20px;
    }
    .camera_image {
      width: 100%;
      height: 100%;
      // transform: rotate(90deg);
    }
    .left-top {
      position: absolute;
      left: 0;
      top: 0;
    }
    .right-top {
      position: absolute;
      right: 0;
      top: 0;
    }
    .left-bottom {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .right-bottom {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
  .cu-bar {
    background: black;
    color: white;
    height: 100px;
    display: flex;
    align-items: center;
    .btn {
      font-size: 28rpx;
      flex: 1;
      text-align: center;
    }
    .photograph {
      border: 2px solid white;
      border-radius: 50%;
      aspect-ratio: 1;
      width: 50px;
      flex: unset;
      border-width: 3px;
      background: black;
      padding: 2px;
      position: relative;
      &::after {
        content: ' ';
        left: 0px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 90%;
        aspect-ratio: 1;
        border-radius: 50%;
        position: absolute;
        background: white;
      }
    }
  }
}
</style>
